<template>
  <page-header-wrapper :title="false">
    <a-card style="width: 800px">
      <a-form-model
        ref="form"
        :model="addForm"
        :rules="addRules"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
      >
        <a-form-model-item label="相同商标名">
          <a-select v-model="addForm.is_some_name">
            <a-select-option v-for="(item,index) in isSomeNameOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="是否公司自持">
          <a-select v-model="addForm.is_company">
            <a-select-option v-for="(item,index) in isCompanyOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="商标类型">
          <a-select v-model="addForm.tm_type">
            <a-select-option v-for="(item,index) in typeOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="所属区域">
          <a-select v-model="addForm.region">
            <a-select-option v-for="(item,index) in regionOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="商标名称">
          <a-input v-model="addForm.tm_name" type="text" />
        </a-form-model-item>
        <a-form-model-item label="商标类别">
          <a-select v-model="addForm.category">
            <a-select-option v-for="(item,index) in categoryOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="类似群组">
          <a-textarea v-model="addForm.groups" :rows="4" placeholder="例如：2001,2013"></a-textarea>
        </a-form-model-item>
        <a-form-model-item label="商标缩略图">
          <a-upload-dragger
            name="file"
            :multiple="true"
            :headers="headers"
            :action="uploadUrl"
            @change="onChange2"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" />
            </p>
            <p class="ant-upload-text">
              将文件拖拽至上传区域
            </p>
          </a-upload-dragger>
        </a-form-model-item>
        <a-form-model-item label="商标缩略图">
          <a-input type="text" />
        </a-form-model-item>
        <a-form-model-item label="对外售价">
          <a-input v-model="addForm.foreign_price" type="text" />
        </a-form-model-item>
        <a-form-model-item label="对内官费">
          <a-input v-model="addForm.inward_official_fee" type="text" />
        </a-form-model-item>
        <a-form-model-item label="我司成本">
          <a-input v-model="addForm.company_cost_fee" type="text" />
        </a-form-model-item>
        <a-form-model-item label="卖家电话">
          <a-input v-model="addForm.owner_phone" type="text" />
        </a-form-model-item>
        <a-form-model-item label="卖家微信">
          <a-input v-model="addForm.owner_wechat" type="text" />
        </a-form-model-item>
        <a-form-model-item label="申请主体类型">
          <a-select v-model="addForm.tm_applicant_type">
            <a-select-option v-for="(item,index) in applyOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="申请主体名称">
          <a-input v-model="addForm.tm_applicant_name" type="text" />
        </a-form-model-item>
        <a-form-model-item label="申请主体证件号">
          <a-input v-model="addForm.tm_applicant_card" type="text" />
        </a-form-model-item>
        <a-form-model-item label="申请主体证件">
          <a-upload-dragger
            name="file"
            :multiple="true"
            :headers="headers"
            :action="uploadUrl"
            @change="onChange3"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" />
            </p>
            <p class="ant-upload-text">
              将文件拖拽至上传区域
            </p>
          </a-upload-dragger>
        </a-form-model-item>
        <a-form-model-item label="注册号">
          <a-input type="text" />
        </a-form-model-item>
        <a-form-model-item label="下证时间">
          <a-date-picker v-model="addForm.end_time" @change="onChange1" />
        </a-form-model-item>
        <a-form-model-item label="商标有效期">
          <a-range-picker v-model="addForm.tm_valid_time_start" @change="onChange" />
        </a-form-model-item>
        <a-form-model-item label="标签">
          <a-select v-model="addForm.label">
            <a-select-option v-for="(item,index) in labelOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="状态">
          <a-select v-model="addForm.tm_status">
            <a-select-option v-for="(item,index) in statusOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="所属商品">
          <a-input v-model="addForm.apply_goods" type="text" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 14, offset: 6 }">
          <a-button type="primary">
            提交
          </a-button>
          <a-button style="margin-left: 10px;">
            重置
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import { getAdd } from '@/api/tm.shop'
  import apis from '@/api'
  import storage from 'store'
  import { ACCESS_TOKEN } from '@/store/mutation-types'

  export default {
    name: 'AddForm',
    data () {
      return {
        addForm: {},
        addRules: {},
        regionOpts: {},
        applyOpts: {},
        categoryOpts: {},
        labelOpts: {},
        statusOpts: {},
        typeOpts: {},
        isCompanyOpts: {},
        isSomeNameOpts: {},
        zsTypeOpts: {},
        uploadUrl: apis.Upload,
        headers: {
          'Access-Token': storage.get(ACCESS_TOKEN)
        }
      }
    },
    created () {
      this.getAddInfo()
    },
    methods: {
      getAddInfo () {
        const app = this
        getAdd().then(res => {
          if (res.status === 0) {
            app.applyOpts = res.result.appTypeOpts
            app.categoryOpts = res.result.category
            app.labelOpts = res.result.labelOpts
            app.regionOpts = res.result.regionOpts
            app.statusOpts = res.result.tmStatusOpts
            app.typeOpts = res.result.typeOpts
            app.isCompanyOpts = res.result.isCompanyOpts
            app.zsTypeOpts = res.result.zsTypeOpts
            app.isSomeNameOpts = res.result.isSomeNameOpts
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      },
      onChange (date, dateString) {
        this.addForm['tm_valid_time_start'] = dateString[0]
        this.addForm['tm_valid_time_end'] = dateString[1]
      },
      onChange1 (date, dateString) {
        this.addForm['end_time'] = dateString
      },
      onChange2 (info) {
        if (info.file.status === 'uploading') {
          return false
        }
        if (info.file.status === 'done') {
          this.addForm.tm_thumb_filename = info.file.name
          this.addForm.tm_thumb = info.file.response.result.url
        }
      },
      onChange3 (info) {
        if (info.file.status === 'uploading') {
          return false
        }
        if (info.file.status === 'done') {
          this.addForm.tm_applicant_filename = info.file.name
          this.addForm.tm_applicant_file = info.file.response.result.url
        }
      }
    }
  }
</script>

<style scoped>

</style>
